<template>
  <view class="content">
    <base-container>
      <view style="position: relative;top: -10px;">
        <base-card :title="form.nameValue" :thumbnail="imag[form.flag]" s>
       <view  style="position: relative;top: -10px;">
       	<view style="margin-bottom: 20rpx; font-size: 30rpx;">
       	  <text style="display: inline-block; width: 130rpx;color: #999999;">申请人</text>
       	  <text style="color: #333333;"> {{ form.applicant }}</text>
       	</view>
       	<view style="margin-bottom: 20rpx; font-size: 30rpx;">
       	  <text style="display: inline-block; width: 130rpx;color: #999999;">车牌号</text>
       	  <text style="color: #333333;"> {{ form.vehiclePlate }}</text>
       	</view>
       	<view style="margin-bottom: 20rpx; font-size: 30rpx;">
       	  <text style="display: inline-block; width: 130rpx;color: #999999;">金额</text>
       	  <text style="color: #333333;"> {{ form.amount }} 元</text>
       	</view>
       	<view style="margin-bottom: 20rpx; font-size: 30rpx;">
       	  <text style="display: inline-block; width: 130rpx;color: #999999;">日期</text>
       	  <text style="color: #333333;"> {{ form.bookkeepingDate }}</text>
       	</view>
       	<view style="margin-bottom: 20rpx; font-size: 30rpx;">
       	  <text style="display: inline-block; width: 130rpx;color: #999999;">经办人</text>
       	  <text style="color: #333333;"> {{ form.handler }}</text>
       	</view>
       	<view style="margin-bottom: 20rpx; font-size: 30rpx;">
       	  <text style="display: inline-block; width: 130rpx;color: #999999;">结算人</text>
       	  <text style="color: #333333;"> {{ form.settler }}</text>
       	</view>
       	<view style="margin-bottom: 20rpx; font-size: 30rpx;">
       	  <text style="display: inline-block; width: 130rpx;color: #999999;">上传图片</text>
          <base-images v-model="form.imgs" :disabled="true"></base-images>
       	</view>
       	<view style="margin-bottom: 20rpx; font-size: 30rpx;">
       	  <text style="display: inline-block; width: 130rpx;color: #999999;">备注</text>
       	  <view style="color: #333333;"> {{ form.remark || "无" }}</view>
       	</view>
       </view>
        </base-card>
      </view>
      <template #actions>
		  <view style="display: flex;gap: 0 20rpx;margin-bottom: 10rpx;padding: 0 30rpx;">
        <u-button v-if="['reject'].includes(form.flag)" 
             type="primary"    @click.stop="toPath('pages/mys/bookkeeping/detail?edit=true&id=' + form.id)">
          修改
        </u-button>
        <u-button v-if="['audit','reject'].includes(form.flag)" 
                 @click.stop="remove(form)">
          删除
        </u-button>
		</view>
      </template>
    </base-container>
  </view>
</template>

<script>
import {BookkeepingApi as Api} from "@/comms/api/bookkeepingApi";
import {Msg, toBack, toPath} from "@/utils/BaseUtils";
import BaseImages from "@/components/base-images/base-images.vue";

export default {
  components: {BaseImages},
  data() {
    return {
      params: {},
      form: {},
	  imag:{
	  		  audit:'/static/my/jz.png',
	  		  agree:'/static/my/ytg.png',
	  		  reject:'/static/my/jz.png'
	  },
      tabs: [
        {key: 'audit', name: '待审核',},
        {key: 'agree', name: '已通过'},
        {key: 'reject', name: '已拒绝'}
      ]
    };
  },
  onLoad(params) {
    this.params = params;
    uni.setNavigationBarTitle({title: "记账详情"});
  },
  mounted() {
    this.loadDate(this.params)
  },
  methods: {
    toPath,
    async loadDate({id}) {
      Msg.loading(async close => {
        if (id) {
          await Api.detail({id}).then(({data}) => this.form = {...data})
		   this.form.nameValue=this.tabs.find(v => v.key == this.form.flag)?.name
        }
        close?.();
      })
    },
    remove({id}) {
      Msg.confirm("确定删除该手工记账信息?")
          .then(() => {
            Api.delete({id}).then(res => {
              Msg.success("删除成功")
              toBack?.()
            })
          })
    }
  }
}
</script>

<style lang="scss">
.content{
	width: 100%;
	height: 100vh;
	background: #fff;
}
</style>
